<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/commom.css">
    <link rel="stylesheet" href="css/blog_detail.css">

</head>
<body>
    <!-- 博客详情页大体结构和列表也很相似. 将相同部分的html代码复制过来引入css即可. -->

    <!-- nav 是导航单词的缩写 -->
    <div class="nav">
        <!-- 博客系统的logo -->
        <img src="image/QQ图片20221112113838.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer不显示内容, 只是占位 将a标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html" target="_blank">主页</a>
        <a href="blog_edit.html" target="_self">写博客</a>
        <a href="login.html" target="_self">退出登录</a>
    </div>

    <!-- 表示页面主区域(版心) -->
    <div class="container">
        <!-- 左侧用户信息 -->
        <div class="container-left">
            <!-- 用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/QQ图片20221112113838.jpg" alt="">
                <!-- 用户名 -->
                <h3>流年染指悲伤</h3>
                <a href="https://gitee.com/li--jiaqiang" target="_blank">Gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>3</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="container-right">
            <div class="blog-detail">
                <!-- 标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 时间 -->
                <div class="date">2022-11-12 12:00:00</div>
                <!-- 正文 -->
                <p>
                    从今天起, 我要认真写代码, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolor, dignissimos sed nemo adipisci laborum nisi vitae. Praesentium sed veritatis facilis aut blanditiis consequatur magnam accusamus modi et, odio exercitationem.
                    从今天起, 我要认真写代码, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolor, dignissimos sed nemo adipisci laborum nisi vitae. Praesentium sed veritatis facilis aut blanditiis consequatur magnam accusamus modi et, odio exercitationem.
                    从今天起, 我要认真写代码, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolor, dignissimos sed nemo adipisci laborum nisi vitae. Praesentium sed veritatis facilis aut blanditiis consequatur magnam accusamus modi et, odio exercitationem.
                    从今天起, 我要认真写代码, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolor, dignissimos sed nemo adipisci laborum nisi vitae. Praesentium sed veritatis facilis aut blanditiis consequatur magnam accusamus modi et, odio exercitationem.
                </p>
            </div>
        </div>

    </div>

    

</body>
</html>